<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>

</head>
<body>


<form action=""; method="get"; onsubmit="return Checked()">
    <h2>表单验证</h2>
    用户名<br><input type="text" id="username" name="username" onfocus="changeStyle(this.id)" onblur="reStyle(this.id)" ;/>
    <br>
    密码<br><input type="text" id="pwd" name="pwd" onfocus="changeStyle(this.id)" onblur="reStyle(this.id)"/>
    <br>
    确认密码<br><input type="text" id="comfirmpwd" onfocus="changeStyle(this.id)" onblur="reStyle(this.id)"/>
    <br>
    邮箱<br><input type="text" id="email" name="email" onfocus="changeStyle(this.id)" onblur="reStyle(this.id)"/>
    <br>
    手机号码<br><input type="text" id="tel" name="tel" onfocus="changeStyle(this.id)" onblur="reStyle(this.id)"/>
    <br>

    <input type="submit" value="提交" id="sub">
    <input type="reset" value="重置" >
</form>


<script>
    username = document.getElementById("username");
    pwd = document.getElementById("pwd");
    comfirmpwd = document.getElementById("comfirmpwd");
    email = document.getElementById("email");
    tel = document.getElementById("tel");

    //有焦点后改变颜色
    function changeStyle(id) {
        document.getElementById(id).style.background="lightgray";
    }

    //离开焦点后恢复颜色
    function reStyle(id) {
        document.getElementById(id).style.background="white";
    }

    //昵称
    function usernameChecked(){
        if (username.value==""){
            alert("昵称不能为空");
            username.onfocus;
            return false;
        }
        return true;
    }

    //密码
    function pwdChecked(){ //当前元素失去焦点
        var reg=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,20}$/;
        //密码长度不能低于4位，不能大于20位。必须包含字母和数字

        if (pwd.value==""){
            alert("密码不能为空");
            return false;
        } else if(!reg.test(pwd.value)) {
            alert("密码的格式不正确(满足4-20位且必须包含字母和数字)");
            pwd.onfocus;
            return false;
        }
        return true;
    }


    //确认密码
    function comfirmpwdChecked(){ //当前元素失去焦点
        if(pwd.value!=comfirmpwd.value) {
            alert("两次输入密码不一致，请重新输入");
            comfirmpwd.onfocus;
            return false;
        }
        return true;
    }

    //邮箱
    function emailChecked(){
        var reg = /^[a-zA-Z]\w*@\w+\..+/;
        if (email.value==""){
            alert("Email不能为空");
            email.onfocus;
            return false;
        } else if ( !reg.test(email.value)) {
            alert("请输入合法的Email");
            email.onfocus;
            return false;
        }
        return true;
    }

    //手机
    function telChecked() {
        var reg = /^1[0-9]{10}/; //1开头+10位其他数字
        if (tel.value==""){
            alert("手机号不能为空");
            tel.onfocus;
            return false;
        } else if ( !reg.test(tel.value)) {
            alert("请输入合法的手机号");
            tel.onfocus;
            return false;
        }
        return true;
    }


    function Checked() {
        var a1 = usernameChecked();
        var a2 = pwdChecked();
        var a3 = comfirmpwdChecked();
        var a4 = emailChecked();
        var a5 = telChecked();
        var a6 = comfirmpwdChecked();
        if(a1&&a2&&a3&&a4&&a5&&a6){
            alert("提交成功!\n" + username.value + " 欢迎你！");
            return true;
        }else{
            return false;
        }
    }


</script>


</body>
</html>